<template>
  <view class="order-list-container">
    <view class="order-item" v-for="(item, index) in orderList" :key="index">
      <view class="order-header">
      <image class="product-image" :src="item.image"></image>
       <view class="product-info">
		   <view class="info-pr">
			   <view class="product-name">{{item.goods.title}}</view>
			     <view class="close-btn">×1</view>
		   </view>
          <view class="product-features">{{item.goods.subtitle}}</view>
		  <view class="order-details">
		    <view class="detail-item">
		      <image class="icon" src="/static/img/lianxiren.png"></image>
		      <text class="label">联系人：</text>
		      <text class="value">{{item.consignee}}</text>
		    </view>
		    <view class="detail-item">
		      <image class="icon" src="/static/img/dianhua.png"></image>
		      <text class="label">联系方式：</text>
		      <text class="value">{{item.mobile}}</text>
		    </view>
		  </view>
        </view>
		
		
     
      </view>
 
      <button class="view-detail-btn" @click="viewDetail(item)">查看详情</button>
    </view>
  </view>
</template>

<script>
	import { GetsubData } from '../../api';
	let baseUrl = 'https://door.10906.cn/api/'
	import wxFun from '@/utils/wxFun.js'
	import store from '@/store'
export default {
  data() {
    return {
      orderList: [
      ]
    };
  },
  async onLoad() {
  	// const code = wxFun.init();
  	// 		this.code = code
  	// 		if (code) {
  	// 			await this.auto_login()
  	// 		}
  			// await this.login()
  			// this.initdata()
  	console.log('页面加载完成');
  		this.getlist();
		
		if(localStorage.getItem("token")){
		console.log('1111111');
			  		// await this.login()
			  		// this.initdata()
		  }
		  else{
			  console.log('2222222222');
			  const code = wxFun.init();
			  		this.code = code
			  		if (code) {
			  			await this.auto_login()
			  		}
		  }
  },
  onShow() {
	  // if (store.state.user.token)
	  //  this.getlist();
  },
  computed: {
  	filteredLockList() {
  		if (!this.searchKeyword) {
  			return this.lockList;
  		}
  		const keyword = this.searchKeyword.toLowerCase();
  		return this.lockList.filter(lock => {
  			return lock.name.toLowerCase().includes(keyword) || 
  				   lock.description.toLowerCase().includes(keyword);
  		});
  	}
  },
  methods: {
	 async getlist(){
		 
		  let res=await GetsubData({status:"unfinished"});
		  if(res.code==1){
			  this.orderList=res.data.data;
			  	console.log('页面加载完成11111',this.orderList[0].image);
		  }
		  
	  },
    removeItem(index) {
      this.orderList.splice(index, 1);
      uni.showToast({
        title: '已删除',
        icon: 'none'
      });
    },
    viewDetail(item) {
		console.log('index',item);
		wx.navigateTo({
		  url: `/pages/subindex/components/bookingdetails?ids=`+item.id // 目标页面路径，可带参数
		})
      // uni.showToast({
      //   title: '查看订单 ' + (index + 1) + ' 详情',
      //   icon: 'none'
      // });
    },
	async auto_login() {
		try {
			let res = await uni.request({
				url: baseUrl + `third/wechat/login?code=${this.code}`,
				method: 'POST',
				data: {
					platform: 'WechatOfficialAccount'
				}
			})
			// this.token = res.data.token
			console.log(res.data.data)
			this.token = res.data.data.userinfo.token
			this.$store.commit('setToken', res.data.data.userinfo.token);
			this.$store.commit('setUserInfo', res.data.data.userinfo);
			console.log(this.$store.state)
			localStorage.setItem('token', res.data.data.userinfo.token)
			localStorage.setItem('userInfo', JSON.stringify(res.data.data.userinfo))
		} catch(error) {
			// window.location.href = window.location.href.split("?")[0]
			console.log(error)
			setTimeout(() => {
				// debugger
				window.location.replace(window.location.href.split("?")[0]);
			}, 100)
		}
	},
  }
}
</script>

<style lang="scss">
/* 重新设计的样式变量 */
$primary-color: #E6212A; // 调整为更柔和的红色
$primary-light: #FEECEC; // 浅红色背景
$text-color: #1A1A1A; // 主文本色
$text-secondary: #666666; // 次要文本色
$border-color: #F0F0F0; // 边框色
$card-bg: #FFFFFF; // 卡片背景色
$padding-base: 24rpx; // 基础内边距
$padding-sm: 16rpx; // 小内边距
$margin-base: 24rpx; // 基础外边距
$border-radius: 12rpx; // 圆角
$shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); // 阴影效果
$font-large: 32rpx; // 大字体
$font-medium: 28rpx; // 中字体
$font-small: 26rpx; // 小字体

// 主容器样式
.order-list-container {
  padding: 18rpx 17rpx;
  background-color: #F9F9F9;
  min-height: 100vh;
  box-sizing: border-box;
    padding-bottom: 120rpx;
}

// 订单项样式
.order-item {
	width: 716rpx;
	height: 328rpx;
	box-sizing: border-box;
 
border-radius: 28rpx;
  margin-bottom: 22rpx;
  padding: 29rpx 18rpx;
  overflow: hidden;
  box-shadow: $shadow;
}

// 头部信息样式
.order-header {
	
  display: flex;

  .product-image {
    width: 204rpx;
    height: 204rpx;
	// background-color:red;
    border-radius: 28rpx;
    object-fit: cover;
    margin-right: 18rpx;
  }

  .product-info {
	  width: 458rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
	color: #2D3046;
     .info-pr{
		 display: flex;
		 justify-content: space-between;
		 .close-btn {
		 
		 	  
		   width: 40rpx;
		   height: 40rpx;
		   font-size: 36rpx;
		   color: $text-secondary;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		 }
		 .product-name {
		   font-weight: 500;
		   font-size: 28rpx;
		   color: #2D3046;
		    font-weight: bold;
		 }
	 }


    .product-features {
    margin-top: 8rpx;
   font-weight: 400;
   font-size: 20rpx;
   color: #7A8195;
    }
	// 详情信息样式
	.order-details {
		// margin-top: 20rpx;
		box-sizing: border-box;
	width: 458rpx;
	height: 112rpx;
	background: #FAFAFB;
	border-radius: 20rpx;
	padding: 20rpx 16rpx ;
	  .detail-item {
	    display: flex;
	    align-items: center;
	    margin-bottom: 12rpx;
	
	    &:last-child {
	      margin-bottom: 0;
	    }
	
	    .icon {
	      width: 24rpx;
	      height: 26rpx;
	      margin-right: 10rpx;
	    }
	
	    .label {
	    font-size: 26rpx;
	    color: #8E949B;
	      width: 140rpx;
	    }
	
	    .value {
	     font-size: 26rpx;
	     color: #000000;
	    }
	  }
	}
  }


}



// 按钮样式
.view-detail-btn {
	margin-left: 510rpx;
	margin-top: 15rpx;
width: 168rpx;
height: 52rpx;
background: #FF0101;
border-radius: 30rpx;
border: 2rpx solid rgba(255,1,1,0.17);
  color: #FFFFFF;
  font-size: 26rpx;
 
 line-height: 52rpx;
  text-align: center;
}
</style>